<template>
    <div class="like">
        <Card>
            <span>猜你喜欢</span>
        </Card>
        <ul>
            <li v-for="(item,index) in likeList" :key="index">
                <h2>
                    <img v-lazy="item.imgUrl" alt="">
                </h2>
                <h3>{{item.name}}</h3>
                <div>
                    <span>￥</span>
                    <b>{{item.price}}</b>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
import Card from '@/components/home/Card.vue';

export default {
    name:'like',
    props: {
        likeList:Array
    },
    components: {
        Card
    }
}
</script>

<style scoped>
.like ul{display: flex;flex-wrap: wrap;justify-content: center;}
.like ul li{width: 50%;display: flex;flex-direction: column;justify-content: center;align-items: center;}
.like ul li>div{width: 93%;text-align: left;color: #f00;}
.like ul li>div span{font-size: .32rem;}
.like ul li>div b{font-size: .426667rem;font-weight: 600;}
.like ul li h3{width: 93%;font-size: .373333rem;color: #222;font-weight: 100;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;text-align: center;}
.like img{width: 4.693333rem;height: 4.693333rem;}
.like img[lazy=loading] {background: #f7f7f7;}
</style>